<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="css/sm.min.css" />
<link rel="stylesheet" type="text/css" href="/H5/css/reset.css?v=10" />
<style>
.shopping{ width:100%; margin:1% auto 0 auto; overflow:hidden; background:white; border-bottom:1px solid #eee; padding:2% 0;}
.shopping li{ float:left;}
.settlement{ width:100%; height:60px; border-top:1px solid #CCC; background:white; position:fixed; bottom:0; line-height:26px;}
.settlement_red{ padding:0 5%; height:60px; background:rgb(230, 108, 166); float:right; color:white; line-height:60px;}
.settlement_money{ font-size:.7rem; margin:4px 2% 0 5px;}
.settlement_choice{ float:left; line-height:60px; font-size:.7rem;}
.shopping_title{ max-height:2rem; line-height:1rem; font-size:.7rem; overflow:hidden; font-weight:bold;}
.shopping_explain{ font-size:.6rem; color:#999; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#vertical input{vertical-align: middle}
</style>
</head>

<body>
    <div class="page-group ms-controller" :controller="order">
        <div class="page page-current">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
                <a class="icon icon-home pull-right" href="/H5"></a>
                <h1 class="title">购物车</h1>
            </header>
            <div class="content" style="padding-bottom: 60px">
                <a :on-click="@change" :if="@list.length>0" style="display: block; float: right; margin: 0 5%;padding: 2% 0; font-size: .8rem">{{@edit?"完成":"编辑"}}</a>
                <a :on-click="@qx" :if="@list.length>0" style="display: block; float: left; margin: 0 5%;padding: 2% 0; font-size: .8rem">{{!@quanx?"全选":"取消全选"}}</a>
                <ul :for="(i,el) in @list" class="shopping">
                    <li style="width:12%; margin:0; padding:0;">
                    <input type="checkbox" :on-click="@total" checked class="checkbok" :attr="{'value': el.goods_id}" style="float:left; width:16px; height:16px;margin: 137% 30% 0;">
                    </li>
                    <li style="width:26%; margin-right:3%;"><img :attr="{src: el.list_cover}" style=" width:100%" /></li>
                    <li style="width:54%;">
                        <div class="shopping_title" style="color:rgb(222, 66, 101)">{{el.title}}</div>
                        <div class="shopping_explain">{{el.intro}}</div>
                        <div class="shopping_explain">{{el.spec_label}}</div>
                        <div style="color:red;">
                            <span style="font-size:.6rem; color:rgb(222, 66, 101);">{{el.contribution>0?" 贡献:+"+el.contribution:""}}</span>
                        </div>
                        <div>
                            <b :if="@vip_level==0" style="font-size:.8rem; color:#F00;">￥{{el.sell_price}}</b>
                            <b :if="@vip_level>0" style="font-size:.8rem; color:#F00;">￥{{el.price_1}}</b>
                            <span style="float: right" id="vertical">
                                <input :on-click="@js($event,el.goods_id,i)" name="p" type="button" value="-" style="width:25px; height: 25px; color: #000;background-color: #fff; border: 1px solid #ccc;"/>
                                <input name="goodnum" :attr="{'value':el.buy_num,'id':'m'+el.goods_id}" :on-blur="@zs($event,el.goods_id,i)" type="text" style="width:40px; color: #000; font-size: 14px; height: 25px; text-align: center;border: 1px solid #ccc;" />
                                <input :on-click="@js($event,el.goods_id,i)" name="m" type="button" value="+" style="background-color: #fff; width:25px; background-color: #fff; height: 25px; color: #000;border: 1px solid #ccc;" />
                            </span>
                        </div>
                    </li>
                </ul>
                <div class="settlement" :if="@list.length>0">
                    <div class="settlement_red" :on-click="@next" :if="!@edit">结算</div>
                    <div class="settlement_red" :on-click="@removeGoods" :if="@edit">删除</div>
                    <div class="settlement_money">
                        合计：<b style="color:#fb6eb5; font-size:.9rem;">￥{{money.toFixed(2)}}</b>
                        <div>
                            <span style="margin-right: 1%" :if="@dkpoint>0">可抵扣积分: {{@totalPoint>@dkpoint?" -"+@dkpoint:"- "+@totalPoint}}</span>
                            <span style="margin-right: 1%" :if="@point>0">积分: +{{point}}</span>
                            <span :if="@con>0">贡献: <a style="color:rgb(222, 66, 101)">+{{con}}</a></span>
                        </div>
                    </div>
                </div>
                <div class="settlement" style="border-top: none" :if="@list.length==0">
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
    <script>
        var order = avalon.define({
            $id: "order",
            list: [],
            money: 0,
            point: 0,
            postage: 0,
            dkpoint: 0,
            totalPoint: 0,
            con: 0,
            quanx: true,
            edit: false,
            vip_level: 0,
            change: function(){
                order.edit = !order.edit;
            },
            qx: function( e ){
                if( !this.quanx ){
                    $( ".checkbok" ).prop( "checked", true );
                }
                else{
                    $( ".checkbok" ).prop( "checked", false );
                }
                this.quanx = !this.quanx;
                order.total();
            },
            js: function( e, a , i ){
                if($(e.target).val()=="+"){
                    $("#m"+a).val($("#m"+a).val()-0+1);
                    this.addCount(a,$("#m"+a).val()); 
                }
                if( $(e.target).val()=="-" ){
                    if( $("#m"+a).val() > 1 ){
                        $("#m"+a).val($("#m"+a).val()-1); 
                        this.addCount(a,$("#m"+a).val());
                    }
                }
                if(order.vip_level>0){
                    if(parseInt($("#m"+a).val())>order.list[i].sum_2){
                        order.list[i].price_1 = order.list[i].price_3
                        return;
                    }
                    if(parseInt($("#m"+a).val())>order.list[i].sum_1){
                        order.list[i].price_1 = order.list[i].price_2;
                        return;
                    }
                    if(parseInt($("#m"+a).val())<=order.list[i].sum_1){
                        order.list[i].price_1 = order.list[i].price_1;
                        return;
                    }
                }
            },
            zs: function( e, a ,i){
                $("#m"+a).val($( e.target ).val().replace(/\D/g,""));
                if( $("#m"+a).val() < 1 ){
                    $("#m"+a).val(1);
                }
                this.addCount(a,$("#m"+a).val());
                if(order.vip_level>0){
                    if(parseInt($("#m"+a).val())>order.list[i].sum_2){
                        order.list[i].price_1 = order.list[i].price_3
                        return;
                    }
                    if(parseInt($("#m"+a).val())>order.list[i].sum_1){
                        order.list[i].price_1 = order.list[i].price_2;
                        return;
                    }
                    if(parseInt($("#m"+a).val())<=order.list[i].sum_1){
                        order.list[i].price_1 = order.list[i].price_1;
                        return;
                    }
                }
            },
            addCount: function(id, num){
                Mall.request("/api/ShopcartChangeNum",{goods_id:id,buy_num:num})
                    .always( function(data){
                        if( data.error_code == 0 ){
                            order.total();
                        }
                    } )
            },
            next: function(){
                var ids = [];
                $( ".shopping input:checked" ).map( function(k,v){
                    ids.push($(v).val())
                } )
                if( ids.length ){
                    if( ids.length == 1 ){
                        ids.join(",");
                        window.location.href = "/H5/cart?id="+ids+"&count="+$("#m"+ids).val();
                    }
                    else{
                        ids.join(",");
                        window.location.href = "/H5/cart?id="+ids;
                    }
                }
                else{
                    $.toast( "请选择商品", 1000, 'warning' )
                }
            },
            removeGoods: function(){
                if( $( ".shopping input:checked" ).length ){
                    var ids = [];
                    $( ".shopping input:checked" ).map( function(k,v){
                        ids.push($(v).val())
                    } )
                    $.confirm("确定要移除"+ids.length+"件商品吗?", function(){
                        Mall.request("/api/ShopcartRemove",{goods_ids: ids})
                            .always( function(data){
                                if( data.error_code == 0 ){
                                    $.toast("移除成功",1000,"success",function(){
                                        order.getList();
                                    })
                                }
                            } )
                    })
                }
                else{
                    $.toast("请选择要移除的商品",1000,"warning")
                }
            },
            getList: function(){
                Mall.request( "/api/ShopcartList" )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            order.vip_level = data.data.vip_level;
                            order.list = data.data.list;
                            if(data.data.list.length){
                                order.postage = data.data.list[0].postage-0;
                                for( var i = 0; i < data.data.list.length; i ++ ){
                                    if( order.postage < data.data.list[i].postage-0 ){
                                        order.postage = data.data.list[i].postage-0;
                                    }
                                }
                                order.total();
                            }
                        }
                    } )
                
            },
            total: function(){
                var checkeds = $( ".shopping input:checked" );
                if( checkeds.length > 0 ){
                    order.money = 0;
                    order.con = 0;
                    for( var i = 0; i < checkeds.length; i ++ ){
                        for( var k = 0; k < order.list.length; k ++ ){
                           if($(checkeds[i]).val()==order.list[k].goods_id){
                                if( order.vip_level > 0){
                                    order.money += order.list[k].price_1*$("#m"+order.list[k].goods_id).val();
                                }
                                else{
                                    order.money += order.list[k].sell_price*$("#m"+order.list[k].goods_id).val();
                                }
                                order.con += Math.abs(order.list[k].contribution)*$("#m"+order.list[k].goods_id).val();
                           }
                        } 
                    }
                }
                else{
                    order.money = 0;
                    order.con = 0;
                }
            },
            getInfo: function(){
                Mall.request("/api/UserInfo",function(data){
                    if( data.error_code == 0 ){
                        order.totalPoint = data.data.total_point;
                        order.vip_level=data.data.vip_level;
                    }
                })
            }
        });
        order.getInfo();
        order.getList();
        avalon.scan( document.body );
    </script>
</body>
</html>
